<template>
  <div id="right-pie">
    <div class="pie-header">行业区域分布</div>
    <div id="right-pie-chart"></div>
  </div>
</template>

<script>
export default {
  name: 'RightPie',
  data () {
    return {
      option: {
        title: {
          text: `区域\n占比`,
          x: '36%',
          y: '40%',
          textStyle: {
            fontSize: 16,
            color: '#fff',
            fontWeight: 400,
            lineHeight: 24
          }
        },
        color: ['#d9b16d', '#d99f0c', '#e66d07', '#b300ed', '#7044da', '#6c00ec', '#1849ec', '#00a3ec'],
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        toolbox: {
          show: true
        },
        legend: {
          type: 'scroll',
          orient: 'vertical',
          right: 20,
          align: 'right',
          bottom: 20,
          textStyle: {
            color: '#fff',
            fontSize: 16
          },
          itemGap: 10,
          formatter: '{name}'
        },
        series: [
          {
            name: '业务警种',
            type: 'pie',
            radius: [40, 100],
            center: ['40%', '50%'],
            data: [
              { name: '邗江区', value: 93 },
              { name: '广陵区', value: 66 },
              { name: '江都区', value: 52 },
              { name: '高邮市', value: 34 },
              { name: '宝应县', value: 22 },
              { name: '其他', value: 10 }
            ],
            label: {
              formatter: '{b}: {d}%',
              fontSize: 16
            },
            labelLine: {
              show: true,
              length: 2,
              length2: 5
            },
            roseType: 'radius'
          }
        ]
      }
    }
  },
  mounted () {
    let chart = this.$echarts.init(document.getElementById('right-pie-chart'))
    chart.setOption(this.option)
  }
}
</script>

<style lang="less" scoped>
  #right-pie {
    width: 100%;
    height: 70%;
    display: flex;
    flex-direction: column;

    .pie-header {
      font-size: 18px;
      font-weight: 550;
      width: 100%;
      text-align: center;
      margin: 10px 0;
    }

    #right-pie-chart {
      height: calc(~"100% - 30px");
    }
  }
</style>
